import { EnergyTypeList, EnergyType } from "../../models/ua-card.model";
import { UaUserDeckSearchDto } from "../../models/ua-user-deck.model";

// components/ua-deck-filter/ua-deck-filter.component.ts
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    ips: { type: Object, value: {} },
    tags: { type: Object, value: {} },
    chooseTag: { type: String, value: '' },
    lobby: { type: Boolean, value: false }
  },

  observers: {
    'ips': function () {
      const data: { label: string, value: number }[] = JSON.parse(JSON.stringify(this.data.ips)) as { label: string, value: number }[];
      this.setData({
        ipList: [{ label: "全部作品", value: 0 }, ...data]
      });
    },
    'tags': function () {
      this.setData({
        isMyDeck: true
      });
      let tags = this.data.tags as string[];
      const tagList = [{ label: "全部分组", value: "" }, { label: "默认分组", value: '默认分组' }];
      for (const tag of tags) {
        tagList.push({
          label: tag, value: tag
        })
      }
      this.setData({ tagList });
    },
    'chooseTag': function () {
      if (this.data.chooseTag === '') {
        this.setData({
          tag: this.data.chooseTag,
          tagText: "全部分组"
        });
      } else {
        this.setData({
          tag: this.data.chooseTag,
          tagText: this.data.chooseTag
        });
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    mainEnergyText: '全部颜色',
    mainEnergyTypeList: [{ label: "全部颜色", value: '' }, ...EnergyTypeList],
    mainEnergyPanelVisible: false,
    mainEnergyType: '',
    ipText: '全部作品',
    ipList: [{ label: "全部作品", value: 0 }],
    ipPanelVisible: false,
    ip: 0,
    rankedOnly: false,
    isMyDeck: false,
    tagText: '全部分组',
    tagList: [{ label: "全部分组", value: "" }, { label: "默认分组", value: '默认分组' }],
    tagPanelVisible: false,
    tag: '',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    searchClick() {
      this.setData({
        mainEnergyPanelVisible: false,
        ipPanelVisible: false,
        tagPanelVisible: false
      });
      let tag: string | undefined = undefined;
      if (this.data.tag !== '') {
        tag = this.data.tag === '默认分组' ? '' : this.data.tag
      }
      const data: UaUserDeckSearchDto = {
        ipId: !!this.data.ip ? this.data.ip : undefined,
        mainEnergyType: !!this.data.mainEnergyType ? this.data.mainEnergyType as EnergyType : undefined,
        ranked: !!this.data.rankedOnly ? true : undefined,
        tag,
      }
      this.triggerEvent('onsearch', JSON.parse(JSON.stringify(data)));
    },

    resetClick() {
      this.setData({
        mainEnergyText: '全部颜色',
        mainEnergyType: '',
        ipText: '全部作品',
        ip: 0,
        tagText: '全部分组',
        tag: '',
        rankedOnly: false,
      });
      this.triggerEvent('onreset', {});
    },

    onMainEnergyTypePanelDisplay() {
      if (!this.data.mainEnergyPanelVisible) {
        this.setData({
          mainEnergyPanelVisible: true,
          ipPanelVisible: false,
          tagPanelVisible: false
        });
      } else {
        this.setData({
          mainEnergyPanelVisible: false,
          ipPanelVisible: false,
          tagPanelVisible: false
        });
      }
    },

    onMainEnergyTypePanelDisplayChange(e: any) {
      this.setData({
        mainEnergyPanelVisible: e.detail.visible,
      });
    },

    onMainEnergyTypePanelConfirm(e: any) {
      this.setData({
        mainEnergyText: e.currentTarget.dataset['label'],
        mainEnergyType: e.currentTarget.dataset['value'],
      });
    },

    onIpPanelDisplay() {
      if (!this.data.ipPanelVisible) {
        this.setData({
          mainEnergyPanelVisible: false,
          ipPanelVisible: true,
          tagPanelVisible: false
        });
      } else {
        this.setData({
          mainEnergyPanelVisible: false,
          ipPanelVisible: false,
          tagPanelVisible: false
        });
      }
    },

    onIpPanelDisplayChange(e: any) {
      this.setData({
        ipPanelVisible: e.detail.visible,
      });
    },

    onIpPanelConfirm(e: any) {
      this.setData({
        ipText: e.currentTarget.dataset['label'],
        ip: e.currentTarget.dataset['value']
      });
    },

    rankedChange() {
      this.setData({
        rankedOnly: !this.data.rankedOnly
      });
      this.searchClick();
    },

    onTagPanelDisplay() {
      if (!this.data.ipPanelVisible) {
        this.setData({
          mainEnergyPanelVisible: false,
          ipPanelVisible: false,
          tagPanelVisible: true
        });
      } else {
        this.setData({
          mainEnergyPanelVisible: false,
          ipPanelVisible: false,
          tagPanelVisible: false
        });
      }
    },

    onTagPanelDisplayChange(e: any) {
      this.setData({
        tagPanelVisible: e.detail.visible,
      });
    },

    onTagPanelConfirm(e: any) {
      this.setData({
        tagText: e.currentTarget.dataset['label'],
        tag: e.currentTarget.dataset['value']
      });
    },
  }
})